<template>
	<view class="box padd">
		<text>头像</text>
		<view class="center">
			<uv-avatar text="李" size="80rpx"></uv-avatar>
		</view>
		<uv-icon name="arrow-right" :size="data.size" :bold="data.bold"></uv-icon>
	</view>
	<view class="box padd">
		<text>昵称</text>
		<view class="center">
			{{data.name}}
		</view>
		<uv-icon name="arrow-right" :size="data.size" :bold="data.bold"></uv-icon>
	</view>
	<view class="box padd">
		<text>电话</text>
		<view class="center">
			{{data.phone}}
		</view>
		<uv-icon name="arrow-right" :size="data.size" :bold="data.bold"></uv-icon>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';

	const data = reactive({
		avatar: '',
		name: '昵称',
		phone: '15093216527',
		size: '26rpx',
		bold: true,
	})
</script>

<style lang="scss" scoped>
	.box {
		display: flex;
		min-height: 50rpx;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		border-bottom: 2rpx solid #fafafa;

		>text {
			font-weight: bolder;
		}

		.center {
			width: 80%;
			display: flex;
			justify-content: flex-end;
			font-size: 24rpx;
			color: #A0A0A0;
			font-weight: bolder;
		}
	}
</style>